<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pagination {
      display: flex;
    }

    .clickable {
      cursor: pointer;
    }

    .disabled {
      color: #ccc;
      pointer-events: none;
    }

    .item,
    .btn {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="user" v-if="isShow">
      <div class="query">
        <div class="btn">
          <button @click="onToUserForm({})">insert</button>
        </div>
      </div>
      <div class="list">
        <table border="1">
          <thead>
            <tr>
              <td>序号</td>
              <td>用户</td>
              <td>年龄</td>
              <td>邮箱</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in users" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.username}}</td>
              <td>{{item.age}}</td>
              <td>{{item.email}}</td>
              <td>
                <span class="clickable" @click="onDelete(item.id)">delete</span>&nbsp;
                <span class="clickable" @click="onToUserForm(item)">update</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination">
        <div>共{{total}}条</div>
        <div class="clickable">
          <select v-model="pageSize">
            <option v-for="item in size" :key=" item" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="clickable" :class="{disabled: currentPage === 1}" @click="onPrePage(currentPage)">上一页</div>
        <div>{{currentPage}}</div>
        <div class="clickable" :class="{disabled: currentPage === pages}" @click="onNextPage(currentPage)">下一页</div>
        <div>共{{pages}}页</div>
      </div>
    </div>
    <div class="form-user" v-else>
      <h2>{{user.id ? 'update' : 'insert'}}</h2>
      <form class="item">
        <input type="text" v-model="user.username"><br>
        <input type="text" v-model="user.age"><br>
        <input type="text" v-model="user.email">
      </form>
      <div class="btn">
        <button @click="onOk()">确定</button>&nbsp;<button @click="onCancel()">取消</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock.js"></script>
  <script src="./utils.js"></script>
  <script src="./mock.js"></script>

  <script>
    new Vue({
      el: '#app',
      mixins: [mixin],
      data: {
        users: [],
        isShow: true,
        user: {}
      },
      methods: {
        /** 查询用户记录 */
        async initTable(params) {
          try {
            const { data } = await axios({
              method: 'post',
              url: '/v1/user/queryUsers',
              data: params,
              responseType: 'json'
            })
            if (data.success) {
              printInfo(data.result)
              this.users = data.result
              this.total = data.total
            }
          } catch (error) {
            printInfo('/v1/user/queryUsers:', error)
          }
        },

        /** 点击删除用户 */
        async onDelete(id) {
          try {
            const { data } = await axios({
              method: 'get',
              url: '/v1/user/deleteUser',
              data: { id },
              responseType: 'json'
            })
            if (data.success) {
              printInfo('delete success')
              this.initTable({ currentPage: this.currentPage, pageSize: this.pageSize })
            }
          } catch (error) {
            printInfo('/v1/user/deleteUser:', error)
          }
        },

        /** 点击跳转到更新用户界面 */
        onToUserForm(item) {
          if (item.id !== null) {
            this.user = item
          }
          this.isShow = false
        },

        /** 修改用户 */
        async updateUser(params) {
          try {
            const { data } = await axios({
              method: 'post',
              url: '/v1/user/updateUser',
              data: params,
              responseType: 'json'
            })
            if (data.success) {
              printInfo('update success')
              this.isShow = true
            }
          } catch (error) {
            printInfo('/v1/user/updateUser:', error)
          }
        },

        /** 新增用户 */
        async insertUser(params) {
          try {
            const { data } = await axios({
              method: 'post',
              url: '/v1/user/insertUser',
              data: params,
              responseType: 'json'
            })
            if (data.success) {
              printInfo('insert success')
              this.initTable({ currentPage: this.currentPage, pageSize: this.pageSize })
              this.isShow = true
            }
          } catch (error) {
            printInfo('/v1/user/insertUser:', error)
          }
        },

        /** 确定修改用户 */
        onOk() {
          const params = JSON.stringify(this.user)
          if (params.id) {
            this.updateUser(params)
          }
          this.insertUser(params)
        },

        /** 取消修改用户 */
        onCancel() {
          this.isShow = true
          printInfo('cancel success')
        }
      }
    })
  </script>
</body>

</html>
